import React from 'react';
import Head from 'next/head';
import {Row, Col,Icon , Breadcrumb} from 'antd';
import Header from '../components/Header';
import Author from '../components/Author';
import Advert from '../components/Advert';
import Footer from '../components/Footer';
import '../public/style/pages/detailed.css';


const Detailed = () => (
  <div>
    <Head>
      <title>Detailed</title>
    </Head>
    <Header />
    <Row className = 'comm-main' type = 'flex' justify = 'center' >
      <Col className = 'comm-left' xs={24} sm= {24} md={16} lg={18} xl={14} >
       <div className = "bread-div">
         <Breadcrumb>
            <Breadcrumb.Item><a href = " /">首页</a></Breadcrumb.Item>
            <Breadcrumb.Item><a href = " /">视频列表</a></Breadcrumb.Item>
            <Breadcrumb.Item>文章内容</Breadcrumb.Item>
         </Breadcrumb>
       </div>
       <div>
         <div className = "detailed-title">
           React实战视频教程-宋工Blog开发(更新08集)
         </div>
         <div className = "list-icon center" >
         <span><Icon type="calendar" /> 2019-06-28</span>
                  <span><Icon type="folder" /> 视频教程</span>
                  <span><Icon type="fire" /> 5498人</span>
         </div>
       </div>
      </Col>
      <Col className = 'comm-right' xs={0} sm= {0} md={7} lg={5} xl={4} >
      
      </Col>
     
    </Row>
 </div>
)

export default Detailed